import React, { Component } from 'react';
import moment from 'moment';
import { connect } from 'react-redux';
import { Button, Card, Divider, Anchor, message } from 'antd';
import { BaseForm } from 'base-antd-components';
import { BrowserRouter as Router} from 'react-router-dom';
import DescriptionList from '../../components/DescriptionList/index.jsx';
import { export_json_to_excel } from '../../vendor/Export2Excel.js';
// import { export_txt_to_zip } from '../../vendor/Export2Zip.js';
import ExTable from '../../components/ExTable/index.jsx';
import FormModal from '../../components/FormModal/index.jsx';

import Editable from '../../components/EditTable/index.jsx';

import ListData from '../../components/ListData/ListData.jsx';

import { getUserInfo } from './actions/index.js';
import './index.css';

const formatStr = 'YYYY-MM-DD';

class UserInfo extends Component {

  state = {
    value: [],
    visible: false,
  }

  selectedRows=[]

  getFormList = () => {
    const formList = [
    {
      type: 'CUSTOMRANGEPICKER',
      field: 'dateRage',
      initialValue: null,
      width: 150,
      rules: [{
        required: true,
        message: '时间区段不能为空！',
      }]
    }, 
    {
      type: 'CASCADEDATEPICKER',
      field: 'dateRage1',
      label: '测试',
      initialValue: null,
      width: 150,
      rules: [{
        required: true,
        message: '时间区段不能为空！',
      }]
    }
    ];
    return formList;
  }

  getTableProps = () => {
    const Com = (<span>姓名</span>);
    const dataSource = [{
      key: '1',
      name: '胡彦斌',
      age: 32,
      address: '西湖区湖底公园1号'
    }, {
      key: '2',
      name: '胡彦祖',
      age: 42,
      address: '西湖区湖底公园1号'
    }];

    const columns = [{
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
    }, {
      title: '年龄',
      dataIndex: 'age',
      key: 'age',
    }, {
      title: '住址',
      dataIndex: 'address',
      key: 'address',
    }, {
      title: '操作',
      dataIndex: 'opt',
      render: (text, record) => {
        return (
          <Button onClick={(e) => {
            console.log(record);
            e.stopPropagation();
          }}>新增</Button>
        );
      }
    }];
    return {
      dataSource,
      columns,
      selectMode: '',
      rowKey: 'name',
      paginationCfg: {
        data: {
          pageNum: 1,
          pageSize: 20,
          totalRows: 50
        },
        onChange: (current, pageSize) => {
          console.log(current, pageSize);
        }
      },
      size: 'middle',
      toolBarCfg: {
        leftContent: [{
          label: '新增',
          type: 'primary',
          onClick: (selectedRows) => {
            this.setState({
              visible: true
            });
            // console.log(selectedRows);
            // window.open('/#/common/login', '详情页');
            // if (!selectedRows || !selectedRows.length) {
            //   message.warn('请选择要一行的数据进行操作！')
            // } else {
            //   console.log(selectedRows);
            // }
          }
        }, {
          label: '导出',
          onClick: (selectedRows) => {
            const theaders = ['姓名', '年龄', '住址'];
            const filterVal = ['name', 'age', 'address'];
            const data = this.formatJson(filterVal, selectedRows);
            export_json_to_excel({ header: theaders, data, filename: 'test' });
          }
        }, {
          label: '导出压缩',
          onClick: (selectedRows) => {
            const theaders = ['姓名', '年龄', '住址'];
            const filterVal = ['name', 'age', 'address'];
            const dataSource = selectedRows;
            const data = this.formatJson(filterVal, dataSource);
            // export_txt_to_zip(theaders, data, 'test', 'test');
          }
        }]
      },

    }
  }

  formatJson = (filterVal, jsonData) => {
    return jsonData.map(v => filterVal.map(j => v[j]))
  }

  disabledStartDate = current => {
    const todayDate = moment(currentDate).format(formatStr);
    return current && current.valueOf() < moment(todayDate).valueOf();
  }

  generateCreateFormList = () => {

    let formList = [];

    formList = formList.concat([
      {
        type: 'INPUT',
        label: '姓名',
        field: 'userName',
      },
      {
        type: 'INPUT',
        label: '年龄',
        field: 'age',
      },
      {
        type: 'INPUT',
        label: '地址',
        field: 'address',
      }
    ]);

    return formList;
  }

  componentDidMount() {
   let ren = eval.call(this, '('+'[{"type": "input", "onclick": function() { console.log("nihao");}}]'+')');
   ren[0].onclick();
  }

  render() {
    const { visible } = this.state;
    const { system } = this.props;
    const { userInfo, errorMsg } = this.props.userInfo;

    return (
      <Card bordered={false}>
        <BaseForm formList={[{
          type: 'INPUT',
          field: 'test',
          label: '姓名'
        }]} onSubmit={(values) => {
          console.log(values);
        }}></BaseForm>
        <ListData tableProps={this.getTableProps()} queryToolBarProps={{
          formList: this.getFormList(),
          onSubmit: (values) => { console.log(values); },
          showOptBtn: true,
        }}></ListData>
        <FormModal formProps={{
          formList: this.generateCreateFormList(),
          formItemLayout: {
            labelCol: {
              span: 4,
            },
            wrapperCol: {
              span: 20,
            },
          },
        }} modalProps={{
          title: '新建',
          visible,
          onOk: (values) => {
            console.log(values);
          },
          onCancel: () => {
            this.setState({
              visible: false
            });
          }
        }}></FormModal>
      </Card>
    );
  }
}

const mapStateToProps = state => {
  return {
  userInfo: state.home,
  system: state.__global
}};

const mapDispatchToProps = {
  getUserInfo
};

export default connect(mapStateToProps, mapDispatchToProps)(UserInfo);